{% load i18n %}

<form method="post">
    {% csrf_token %}

    <h2 class="font-semibold mb-3 text-font-important-light dark:text-font-important-dark">
        {% trans "User permissions" %}
    </h2>

    {% if users_perms.items %}
        <table id="user-permissions" class="border-gray-200 border-spacing-none border-separate mb-6 w-full lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
            <thead class="hidden lg:table-header-group text-font-important-light dark:text-font-important-dark">
                <tr>
                    <th class="align-middle font-semibold px-3 py-2 text-left">
                        {% trans "User" %}
                    </th>

                    {% for perm in model_perms %}
                        <th class="align-middle font-semibold px-3 py-2 text-left">
                            {{ perm.name }}
                        </th>
                    {% endfor %}

                    <th class="align-middle font-semibold px-3 py-2 text-right">
                        {% trans "Action" %}
                    </th>
                </tr>
            </thead>

            <tbody>
                {% for user, user_perms in users_perms.items %}
                    <tr class="block border mb-3 rounded-md shadow-sm lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-gray-800">
                        <th class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left  before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto  first:border-t-0  lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans "User" %}">
                            <span>
                                {{ user }}
                            </span>
                        </th>

                        {% for perm in model_perms %}
                            <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left  before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto  first:border-t-0  lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{{ perm.name }}">
                                {% if perm.codename in user_perms %}
                                    {% include "unfold/helpers/boolean.html" with value=True %}
                                {% else %}
                                    {% include "unfold/helpers/boolean.html" with value=False %}
                                {% endif %}
                            </td>
                        {% endfor %}

                        <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-right  before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto  first:border-t-0  lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans "Action" %}">
                            <a href="user-manage/{{ user.id|safe }}/" class="hover:text-gray-700 dark:hover:text-white">
                                {% trans "Edit" %}
                            </a>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% endif %}

    <div class="border border-gray-200 overflow-hidden rounded-md p-3 shadow-sm dark:border-gray-800">
        {% for field in user_form %}
            {% include "admin/guardian/model/field.html" %}
        {% endfor %}

        <div class="bg-gray-50 border-t flex flex-row -m-3 p-3 dark:bg-white/[.02] dark:border-gray-800">
            <div class="ml-auto">
                {% trans "Manage user" as title %}
                {% include "unfold/helpers/submit.html" with title=title name="submit_manage_user" %}
            </div>
        </div>
    </div>
</form>
